<template>
	<view class="pagebody">
		<view class="header">
			<view class=" left flex-row align-center">
				<image style="margin-right: 8rpx;width: 48rpx;height: 48rpx;" src="../static/images/nav/navlogo.png" mode=""></image>
				网站导航
			</view>
			<image @click="goback" style="width: 48rpx;height: 48rpx;" src="../static/images/nav/close.png" mode=""></image>
		</view>
		
		<view class="navbox">
			<view class="top flex-row justify-between">
				<view class="topitem">
					<image style="width: 56rpx;height: 56rpx;margin-bottom: 18rpx;" src="../static/images/nav/wzsy.png" mode=""></image>
					网站首页
				</view>
				<view class="topitem">
					<image style="width: 56rpx;height: 56rpx;margin-bottom: 18rpx;" src="../static/images/nav/byq.png" mode=""></image>
					病友圈
				</view>
				<view class="topitem">
					<image style="width: 56rpx;height: 56rpx;margin-bottom: 18rpx;" src="../static/images/nav/jbsq.png" mode=""></image>
					疾病社区
				</view>
				<view class="topitem">
					<image style="width: 56rpx;height: 56rpx;margin-bottom: 18rpx;" src="../static/images/nav/lxwm.png" mode=""></image>
					联系我们
				</view>
			</view>
			
			<view class="bottom">
				<view class="bottomitem" v-for="(element,index) in botlist" :key="index">
					<view class="title">
						<view class="titleline"></view>{{element.title}}
					</view>
					<view class="botbox">
						<view v-for="(item,itemindex) in element.itemlist" :key="itemindex" class="navitem" @click="topage(item.path)">
							{{item.name}}
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {
		getInfo
	} from '@/api/login'
	export default{
		data(){
			return{
				userDocument:{},
				botlist:[
					{
						title:'我们的服务',
						itemlist:[
							{
								name:'全球找药',
								path:'/pages/serve/findDrug'
							},
							{
								name:'远程问诊',
								path:'/pages/serve/consultation'
							},
							{
								name:'临床招募',
								path:'/pages/serve/clinical'
							},
							{
								name:'说明书翻译',
								path:'/pages/serve/instructions'
							},
						]
					},
					{
						title:'赴日就医',
						itemlist:[
							{
								name:'日本看病',
								path:'/pages/serve/seeDoctor'
							},
							{
								name:'日本体检',
								path:'/pages/serve/physical'
							},
							{
								name:'日本远程问诊',
								path:'/pages/serve/jpanConsultation'
							},
							{
								name:'日本医院 ',
								path:'/pages/knowledge/hospitallist'
							},
							{
								name:'日本医生',
								path:'/pages/knowledge/doctorlist'
							},
							{
								name:'看病攻略',
								path:''
							},
							{
								name:'干细胞',
								path:''
							},
							{
								name:'抗癌技术',
								path:''
							},
						]
					},
					{
						title:'知识库',
						itemlist:[
							{
								name:'疾病知识',
								path:''
							},
							{
								name:'疾病指南',
								path:''
							},
							{
								name:'相关药品',
								path:''
							},
							{
								name:'临床项目',
								path:''
							},
						]
					},
					
				]
				
			}
		},
		onLoad(){
			this.getUser()
		},
		methods:{
			getUser() {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					this.botlist[2].itemlist[0].path = '/pages/knowledge/detail?id='+this.userDocument.diseaseId
					this.botlist[2].itemlist[1].path = '/pages/knowledge/diseaseGuide?id='+this.userDocument.diseaseId
					this.botlist[2].itemlist[2].path = '/pages/knowledge/druglist?id='+this.userDocument.diseaseId
					this.botlist[2].itemlist[3].path = '/pages/knowledge/diseaseClinical?id='+this.userDocument.diseaseId
				})
			},
			topage(path) {
				uni.navigateTo({
					url: path
				})
			},
			goback(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagebody{
		background: #F0F6F5;
		.header{
			padding: 0 32rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				font-weight: bold;
				font-size: 36rpx;
				color: #001214;
				line-height: 59rpx;
			}
		}
		
		.navbox{
			padding: 52rpx 24rpx;
			.top{
				.topitem{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 164rpx;
					height: 228rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #001214;
				}
			}
			.bottom{
				.bottomitem{
					margin-top: 73rpx;
					.title{
						display: flex;
						font-weight: 800;
						font-size: 40rpx;
						color: #303B39;
						line-height: 40rpx;
						.titleline{
							width: 8rpx;
							height: 40rpx;
							background: #00D9B2;
							border-radius: 8px 8px 8px 8px;
							margin-right: 8rpx;
						}
					}
					.botbox{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin-top: 32rpx;
						.navitem{
							text-align: center;
							line-height: 84rpx;
							background: #FFF;
							width: 339rpx;
							height: 84rpx;
							margin-bottom: 24rpx;
							font-weight: bold;
							font-size: 36rpx;
							color: #303B39;
							border-radius: 16rpx;
						}
					}
				}
				
			}
			
		}
		
	}
</style>